<template>
  <div id="message">
    <div v-if="$store.state.loginState">消息</div>
    <div v-else>登录后查看</div>
    <div v-if="$store.state.loginState">
      <ul>
        <li style="height:49px"></li>
        <li style="display: flex" v-for="(item,index) in msgs" :key="index">
          <div
            style="
              width: 50px;
              height: 50px;
              background: red;
              margin: 5px;
              border-radius: 50%;
            "
            :style="{
                backgroundImage: 'url(' + item.fromUser.avatarUrl + ')',
                backgroundSize: '100%,100%',
              }"
          ></div>
          <div
            style="
              flex: 1 1 0%;
              margin: 5px;
              display: flex;
              flex-direction: column;
              line-height: 25px;
            "
          >
            <div style="fontsize: 15px">{{item.fromUser.nickname}}</div>
            <div style="color: gray;padding: 20px;">{{item.fromUser.signature}}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getMessage } from "network/api/MessageApi";
export default {
  data() {
    return {
      msgs: [],
    };
  },
  mounted() {
    console.log(this.$store.state.loginState);
    let data = {};
    data.cookie = JSON.parse(this.$cookie.get("wangyiyunInfo")).cookie;
    data.timestamp = new Date().getTime()
  
    getMessage(data).then((res) => {
      this.msgs = res.data.msgs;
      console.log(res);
    });
  },
  computed:{

  }
};
</script>

<style lang="less">
#message {
  > div:first-child {
    position: fixed;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: rgb(201, 190, 190);
    font-size: 20px;
    font-weight: bold;
    color: white;
    line-height: 49px;
    text-align: center;
  }
}

</style>